<template>
	<view class="course-detail">
		<!-- 课程封面 -->
		<view class="cover-section">
			<image class="cover-image" :src="courseInfo.imageUrl" mode="aspectFill"></image>
			<view class="cover-mask">
				<text class="course-title">{{ courseInfo.title }}</text>
				<text class="course-price">¥{{ courseInfo.price }}</text>
			</view>
		</view>
		
		<!-- 基本信息 -->
		<view class="section">
			<view class="section-title">基本信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">课程地点</text>
					<text class="value">{{ courseInfo.location }}</text>
				</view>
				<view class="info-item">
					<text class="label">课程时长</text>
					<text class="value">{{ courseInfo.duration }}</text>
				</view>
				<view class="info-item">
					<text class="label">适合人群</text>
					<text class="value">{{ courseInfo.suitableFor }}</text>
				</view>
			</view>
		</view>
		
		<!-- 课程安排 -->
		<view class="section">
			<view class="section-title">课程安排</view>
			<view class="content-box">
				<text class="content-text">{{ courseInfo.schedule }}</text>
			</view>
		</view>
		
		<!-- 注意事项 -->
		<view class="section">
			<view class="section-title">注意事项</view>
			<view class="content-box">
				<text class="content-text">{{ courseInfo.notes }}</text>
			</view>
		</view>
		
		<!-- 所需物品 -->
		<view class="section">
			<view class="section-title">所需物品</view>
			<view class="content-box">
				<text class="content-text">{{ courseInfo.requiredItems }}</text>
			</view>
		</view>
		
		<!-- 课程目标 -->
		<view class="section">
			<view class="section-title">课程目标</view>
			<view class="content-box">
				<text class="content-text">{{ courseInfo.objectives }}</text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button class="action-btn contact" @click="contactService">
				<text class="iconfont icon-service"></text>
				<text>联系客服</text>
			</button>
			<button class="action-btn book" @click="handleEnroll">
				<text class="iconfont icon-book"></text>
				<text>立即报名</text>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			courseId: '',
			courseInfo: {
				title: '',
				imageUrl: '',
				price: '',
				location: '',
				duration: '',
				suitableFor: '',
				schedule: '',
				notes: '',
				requiredItems: '',
				objectives: ''
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.courseId = options.id
			this.loadCourseDetail()
		}
	},
	methods: {
		// 加载课程详情
		async loadCourseDetail() {
			try {
				uni.showLoading({
					title: '加载中...'
				})
				
				const res = await uniCloud.callFunction({
					name: 'getCourseDetail',
					data: { courseId: this.courseId }
				})
				
				if (res.result.code === 0) {
					this.courseInfo = res.result.data
				} else {
					uni.showToast({
						title: res.result.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载课程详情失败', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 联系客服
		contactService() {
			uni.showModal({
				title: '联系客服',
				content: '客服电话：400-123-4567',
				confirmText: '拨打',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '4001234567'
						})
					}
				}
			})
		},
		
		// 立即报名
		async handleEnroll() {
			try {
				// 获取用户信息
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.nickname) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: '报名中...'
				})
				
				// 调用报名云函数
				const res = await uniCloud.callFunction({
					name: 'enrollCourse',
					data: {
						courseId: this.courseId,
						userInfo: userInfo
					}
				})
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				})
				
				if (res.result.code === 0) {
					
					// 更新课程信息
					this.loadCourseDetail()
				} else {
					uni.showToast({
						title: res.result.msg || '报名失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('报名失败', error)
				uni.showToast({
					title: '报名失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style>
.course-detail {
	min-height: 100vh;
	background-color: #f8f9fc;
	padding-bottom: 120rpx;
}

.cover-section {
	position: relative;
	height: 500rpx;
}

.cover-image {
	width: 100%;
	height: 100%;
}

.cover-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.course-title {
	font-size: 40rpx;
	color: #fff;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.course-price {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.info-list {
	background-color: #f8f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	font-size: 28rpx;
}

.info-item:not(:last-child) {
	border-bottom: 2rpx solid #eee;
}

.info-item .label {
	color: #666;
}

.info-item .value {
	color: #333;
}

.content-box {
	background-color: #f8f9fc;
	border-radius: 12rpx;
	padding: 20rpx;
}

.content-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin: 0 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.action-btn .iconfont {
	margin-right: 10rpx;
	font-size: 32rpx;
}

.action-btn.contact {
	background-color: #fff7e6;
	color: #fa8c16;
}

.action-btn.book {
	background-color: #4a6ee0;
	color: #fff;
}

/* 图标字体 */
@font-face {
	font-family: "iconfont";
	src: url('//at.alicdn.com/t/font_3456789_abcdef.woff2') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-service:before {
	content: "\e634";
}

.icon-book:before {
	content: "\e635";
}
</style>